<template>
	<view class="content">
		<view class="item-box" v-for="(item,index) in courseData" :key="index">
			<view>
				<view>
					<image :src="'/static/image-che/'+item.makeGroupImage" mode=""></image>
				</view>
				<view>
					<view>{{item.makeGroupName}}</view>
					<view>{{item.makeGroupTime}}&nbsp教练:{{item.makeCoachName}}</view>
					<view>{{item.makeGroupTab}}</view>
				</view>
				<view>
					<button type="default" size="mini"
						@click="delMake(item.makeId)">{{item.makeDel==1?'取消':'已取消'}}</button>
					<button type="default" size="mini"
						@click="SignIn(item.makeId)">{{item.makeType==1?'签到':'已签到'}}</button>
				</view>
			</view>
			<view></view>
		</view>
	</view>
</template>

<script>
	import {
		reactive,
		toRefs,
		onMounted,
	} from 'vue'
	import store from '../../../store/index.js'
	import myRequest from '../../../utils/myRequest.js'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	export default {
		setup() {
			let data = reactive({
				useId: '',
				courseData: [],
				getData() {
					data.courseData = []
					myRequest({
						url: '/getMake',
						method: 'post',
						data: {
							UseId: data.useId
						}
					}).then((res) => {
						res.data.data.forEach(i => {
							if (i.makeType == 1) {
								data.courseData.push(i)
							}
						})
						if (data.courseData == '') {
							console.log(1)
							uni.showToast({
								title: '暂无预约哦~',
								duration: 2000,
							})
						}
					})
				},
				SignIn(i) {
					console.log(i)
					myRequest({
						url: '/editMake',
						method: 'post',
						data: {
							makeId: i,
							type: '3',
						}
					}).then((res) => {
						if (res.data.code == 200) {
							uni.showToast({
								title: '签到成功',
								duration: 2000,
							})
							data.getData()
						} else {
							uni.showToast({
								title: '签到失败',
								duration: 2000,
								icon: error
							});
						}
					})
				},
				delMake(v) {
					myRequest({
						url: '/delMake',
						method: 'post',
						data: {
							makeid: v
						}
					}).then((res) => {
						if (res.data.code == 200) {
							uni.showToast({
								title: '删除成功',
								duration: 2000,
							});
							data.getData()
						} else {
							uni.showToast({
								title: '删除失败',
								duration: 2000,
								icon: error
							});
						}
					})
				},
			})
			onMounted(() => {
				data.useId = store.state.userdata[0].vipId
				data.getData()
			})
			return {
				...toRefs(data)
			}
		}

	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx 15rpx;
	}

	.item-box {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 200rpx;

		>view:nth-of-type(1) {
			display: flex;
			justify-content: space-between;
			align-items: center;

			>view:nth-of-type(1) {
				border-radius: 10px;
				overflow: hidden;
				width: 100rpx;
				height: 100rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			>view:nth-of-type(2) {
				flex-basis: 400rpx;

				>view:nth-of-type(1) {
					font-size: 30rpx;
					font-weight: bold;
				}

				>view:nth-of-type(2) {
					font-size: 26rpx;
					margin: 15rpx 0;
				}

				>view:nth-of-type(3) {
					font-size: 30rpx;
					color: #FFFFFF;
					background: #FEC400;
					border-radius: 10rpx;
				}
			}

			>view:nth-of-type(3) {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				button {
					padding: 3rpx 15rpx;
					color: #FFFFFF;
				}

				>button:nth-of-type(1) {
					background-color: #FF0000;
				}

				>button:nth-of-type(2) {
					background-color: #FFC000;
					margin-top: 15rpx;
				}
			}
		}

	}
</style>
